<template>

  <div id="cokpitkanban" class="flex h-100 flex-wrap">
    <!-- 加载动画 -->
    <div class="loads" v-show="isload">
      <dv-loading style="width: 250px; height: 250px">Loading...</dv-loading>
    </div>
    <header class="w-100 h-10 flex j-center a-center" style="margin-top: 45px;">
      <dv-decoration-5 :dur="10" style="position: absolute;bottom: 0;right: 0;height: 50%;" class="w-100 "/>
      <div class="font-big font-weight">
        员工队伍情况看板
      </div>
    </header>


    <div class="p w-100 h-90 flex">
      <div class="w-70 h-100  flex j-sb flex-wrap">
        <div class="w-100 h-20  flex j-sb">

          <div class="top_item  m-r w-25 h-100">
            <dv-border-box-13>
              <div class="item flex flex-column h-100 j-sb">
                <div class="font-weight font-m">高级</div>
                <div class="font-weight font-l color-blue">{{advanced}} <span class="font-s">人</span></div>
              </div>

            </dv-border-box-13>
          </div>
          <div class="top_item  m-r w-25 h-100">
            <dv-border-box-13>
              <div class="item flex flex-column h-100 j-sb">
                <div class="font-weight font-m">正高级</div>
                <div class="font-weight font-l color-blue">{{veryhighend}} <span class="font-s">人</span></div>
              </div>

            </dv-border-box-13>
          </div>
          <div class="top_item  m-r w-25 h-100">
            <dv-border-box-13>
              <div class="item flex flex-column h-100 j-sb">
                <div class="font-weight font-m">中级</div>
                <div class="font-weight font-l color-blue">{{intermediate}} <span class="font-s">人</span></div>
              </div>

            </dv-border-box-13>
          </div>
          <div class="top_item  m-r w-25 h-100">
            <dv-border-box-13>
              <div class="item flex flex-column h-100 j-sb">
                <div class="font-weight font-m">初级</div>
                <div class="font-weight font-l color-blue">{{primary}} <span class="font-s">人</span></div>
              </div>

            </dv-border-box-13>
          </div>
        </div>

        <div class="w-35 h-80 flex flex-column">
          <div class="h-50 ">
            <dv-border-box-13>
              <div class="item h-100">
                <div class="w-100 h-15 font-s font-weight">性别分布</div>
                <div class="w-100 h-100 p-tb" id="chart7"></div>
              </div>
            </dv-border-box-13>
          </div>
          <div class="h-50 ">
            <dv-border-box-13>
              <div class="item h-100">
                <div class="w-100 h-15 font-s font-weight">技能分布</div>
                <div class="w-100 h-100 p-tb" id="chart5"></div>
              </div>

            </dv-border-box-13>
          </div>
        </div>


        <div class="w-65 h-80 flex flex-column">
          <div class="h-50 m-l m-r">
            <dv-border-box-13>
              <div class="item h-100">
                <div class="w-100 h-15 font-s font-weight">年龄分布图</div>
                <div class="w-100 h-100 p-tb" id="chart1"></div>
              </div>
            </dv-border-box-13>
          </div>

          <div class="h-50 m-l m-r">
            <dv-border-box-13>

              <div id="center" class="w-100 h-100 item">
                <div class="w-100 h-15 font-s font-weight">专业分布
                </div>
                <div class="w-100 h-90 p-tb" id="chart2"></div>
              </div>
            </dv-border-box-13>
          </div>
        </div>
      </div>

      <div class="w-30 h-100 right flex flex-column">
        <div class="h-20" style="margin-top:15px;">
          <div style="margin-left:15px;">
            <div style="font-size: 20px;">
              <span class="demonstration" style="margin-right:10px; font-size:20px;">单位</span>
              <el-select v-model="unitName" placeholder="请选择单位" filterable clearable size="mini" style="width:287px;">
                <el-option
                  v-for="item in unitNameList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
            <div style="display:flex; margin: 10px 0; font-size: 20px;">
              <span class="demonstration" style="margin-top:6px;  font-size:20px;">时间</span>
              <el-date-picker
                style="margin-left: 14px; width:140px; margin-right:10px;"
                v-model="yearTimeValue"
                type="year"
                size="mini"
                value-format="yyyy"
                placeholder="选择年"
              >
              </el-date-picker>
              <el-select v-model="yueDate" placeholder="请选择月份" style="width:140px" filterable clearable size="mini">
                <el-option
                  v-for="item in yueList"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div style="font-size: 20px; float:right;">
              <el-button size="small" type="primary" @click="searchBtn" style="font-size:16px;">查询</el-button>
              <el-button size="small" @click="emptyClick" style="font-size:16px;">清空</el-button>
            </div>
          </div>
        </div>
        <div class="h-40 m-b">
          <dv-border-box-13>
            <div class="item w-100 h-100">
              <div class="w-100 h-10 font-weight font-s">文化程度分布图</div>
              <div class="w-100 h-90 p-tb" id="chart4"></div>
            </div>
          </dv-border-box-13>
        </div>
        <div class="h-40">
          <dv-border-box-13>
            <div class="item w-100 h-100">
              <div class="w-100 h-15 font-weight font-s">人力资源分布图</div>
              <div class="w-100 h-90 p-tb" id="chart6"></div>
            </div>
          </dv-border-box-13>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        map:{},
        advanced:0,
        veryhighend:0,
        intermediate:0,
        primary:0,
        itemList:[],
        isload: false,
        unitName: null,
        yueDate: null,
        yearTimeValue: null,
        dateTime: null,
        unitNameList: [],
        yueList: [
          {
            value: '01',
            label: '一月'
          }, {
            value: '02',
            label: '二月'
          }, {
            value: '03',
            label: '三月'
          }, {
            value: '04',
            label: '四月'
          }, {
            value: '05',
            label: '五月'
          },
          {
            value: '06',
            label: '六月'
          }, {
            value: '07',
            label: '七月'
          }, {
            value: '08',
            label: '八月'
          }, {
            value: '09',
            label: '九月'
          }, {
            value: '10',
            label: '十月'
          },
          {
            value: '11',
            label: '十一月'
          }, {
            value: '12',
            label: '十二月'
          }
        ]
      }
    },
    created() {
      this.getList ()

      this.getUnitNameList ()
      this.selectChart1 (1)
      this.selectChart2 (1)
      this.selectChart4 (1)
      // this.selectChart3 (1)
      this.selectChart5 (1)
      this.selectChart6 (1)
      this.selectChart7 (1)

      // 技能分布

    },
    methods: {

      getUnitNameList() {
        this.unitNameList = []
        axios ({
          method: 'get',
          url: '/hr-xc-human-resources-perform-manage/generator/cockpit/personnel-team/queryAllUnitName'
        }).then (({ data }) => {
            if (data && data.code === '00000') {
              data.result.forEach (v => {
                this.unitNameList.push (v)
              })
            }
          }
        ).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },

      searchBtn() {
        if (this.unitName === undefined || this.unitName === null) {
          return this.$message.warning ('单位不能为空！')
        }
        if (this.yearTimeValue === undefined || this.yearTimeValue === null) {
          return this.$message.warning ('年份不能为空！')
        } else {
          this.dateTime = this.yearTimeValue
        }
        if (this.yearTimeValue !== null && this.yueDate !== null) {
          console.log ('this.yearTimeValue==>' + this.yearTimeValue)
          console.log ('this.yueDate==>' + this.yueDate)
          this.dateTime = this.yearTimeValue + '.' + this.yueDate
          console.log ('this.dateTime==>' + this.dateTime)
        }
        this.getList ()
      },
      emptyClick() {
        this.unitName = null
        this.yearTimeValue = null
        this.yueDate = null
      },
      getList() {
        let that = this
        axios ({
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/cockpit/personnel-team/queryPersonnelTeamGroup',
          data: {
            unitName: that.unitName,
            date: that.dateTime
          }
        }).then (({ data }) => {
            if (data && data.code === '00000') {
              // 年龄分布及性别比例
              that.selectChart1 (data.result.age)
              that.selectChart2 (data.result.specialty)
              that.selectChart4 (data.result.culture)
              if (data.result.jobtitle!=null){
                var entries = Object.entries(data.result.jobtitle)
                entries.forEach(v=>{
                  if (v[0]==="高级"){
                    this.advanced=v[1]
                  }
                  if (v[0]==="正高级"){
                    this.veryhighend=v[1]
                  }
                  if (v[0]==="中级"){
                    this.intermediate=v[1]
                  }
                  if (v[0]==="初级"){
                    this.primary=v[1]
                  }
                })
              }else {
                this.advanced=0
                this.veryhighend=0
                this.intermediate=0
                this.primary=0
              }
              // that.selectChart3 (data.result.jobtitle)
              that.selectChart5 (data.result.skillLevel)
              that.selectChart6 (data.result.human)
              that.selectChart7 (data.result.sex)
            }
          }
        ).catch(error => {
          // this.$message.error ('服务器访问异常，请从新登录')
        });
      },
      getUnitNameList() {
        this.unitNameList = []
        axios ({
          method: 'get',
          url: '/hr-xc-human-resources-perform-manage/generator/cockpit/personnel-team/queryAllUnitName'
        }).then (({ data }) => {
            if (data && data.code === '00000') {
              data.result.forEach (v => {
                this.unitNameList.push (v)
              })
            }
          }
        ).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },

      // 年龄分布图
      selectChart1(age) {
        this.$nextTick (() => {
          var myChart = this.$echarts.init (document.getElementById ('chart1'))
          // 指定图表的配置项和数据
          if (age === 1 || age===null) {
            myChart.clear()
            myChart.setOption ({
              title: {
                text: '暂无数据',
                x: 'center',
                y: 'center',
                textStyle: {
                  fontSize: 14,
                  fontWeight: 'normal'
                }
              }
            })
            // myChart.clear()
          } else {
            var option = {
              title: {
                text: ''
              },
              // title: {
              //   text: '年龄分布图',
              //   left: 'center', // 标题居中
              //   top: 20, // 距离上边框20像素
              //   textStyle: {
              //     fontSize: 12,
              //     fontWeight: 'bolder',
              //     color: '#333'          // 主标题文字颜色
              //   }
              // },
              tooltip: {},
              legend: {
                data: ['人数'],
                left:'left',

              },
              xAxis: {
                data: age.x,
                axisLabel: {
                  //  X 坐标轴标签相关设置
                  interval: 0,
                  rotate: '45'
                }
              },
              yAxis: {
                min:'5',
              },
              series: [{
                barWidth: 35,
                itemStyle: {
                  color: '#95997E'
                },
                name: '人数',
                type: 'bar',
                data: age.y
              }]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption (option)
            window.addEventListener('resize', function () {
              myChart.resize()
            })
          }
        })
      },

      // 专业
      selectChart2(specialty) {
        this.$nextTick (() => {
          var myChart = this.$echarts.init (document.getElementById ('chart2'))
          if (specialty === 1 || specialty ===null) {
            myChart.clear()
            myChart.setOption ({
              title: {
                text: '暂无数据',
                x: 'center',
                y: 'center',
                textStyle: {
                  fontSize: 14,
                  fontWeight: 'normal'
                }
              }
            })

          } else {
            var option = {
              title: {
                text: ''
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: '专业',
                  type: 'pie',
                  radius: '50%',
                  data: specialty,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            }
            myChart.setOption (option)
            window.addEventListener('resize', function () {
              myChart.resize()
            })
          }
        })
      },
      // 文化程度分布图
      selectChart4(culture) {
        this.$nextTick (() => {
          var myChart = this.$echarts.init (document.getElementById ('chart4'))
          if (culture === 1 || culture === null) {
            myChart.clear()
            myChart.setOption ({
              title: {
                text: '暂无数据',
                x: 'center',
                y: 'center',
                textStyle: {
                  fontSize: 14,
                  fontWeight: 'normal'
                }
              }
            })
          } else {
            var option = {
              title: {
                text: ''
              },
              // title: {
              //   text: '文化程度分布图',
              //   textStyle: {
              //     fontSize: 12,
              //     fontWeight: 'bolder',
              //     color: '#333'          // 主标题文字颜色
              //   }
              // },
              tooltip: {
                trigger: 'item'
              },
              // legend: {
              //   top: '5%',
              //   left: 'center'
              // },
              legend: {
                orient: 'vertical',
                left: 'left',
                // top: 'middle',
              },
              series: [
                {
                  name: '数量',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: 16,
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: culture
                }
              ]
            }
            myChart.setOption (option)
            window.addEventListener('resize', function () {
              myChart.resize()
            })
          }
        })
      },
      // 技能分布
      selectChart5(skillLevel) {
        this.$nextTick (() => {
          var myChart = this.$echarts.init (document.getElementById ('chart5'))
          if (skillLevel === 1 || skillLevel === null) {
            myChart.clear()
            myChart.setOption ({
              title: {
                text: '暂无数据',
                x: 'center',
                y: 'center',
                textStyle: {
                  fontSize: 14,
                  fontWeight: 'normal'
                }
              }
            })
          } else {
            var option = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              title: {
                text: ''
              },
              // title: {
              //   text: '技能水平分布',
              //   left: 'center', // 标题居中
              //   top: 20, // 距离上边框20像素
              //   textStyle: {
              //     fontSize: 12,
              //     fontWeight: 'bolder',
              //     color: '#333'          // 主标题文字颜色
              //   }
              // },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '2%',
                containLabel: true
              },
              xAxis: [
                {
                  type: 'category',
                  data: skillLevel.x,
                  axisLabel: {
                    //  X 坐标轴标签相关设置
                    alignWithLabel: true,
                    interval: 0,
                    rotate: '45'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [
                {
                  name: '数量',
                  type: 'bar',
                  barWidth: '35',
                  itemStyle: {
                    color: '#737299'
                  },
                  data: skillLevel.y
                }
              ]
            }
            myChart.setOption (option)
            window.addEventListener('resize', function () {
              myChart.resize()
            })
          }
        })
      },
// 人力资源管理分布图
      selectChart6(human) {
        this.$nextTick (() => {
          var myChart = this.$echarts.init (document.getElementById ('chart6'))
          if (human === 1 || human === null) {
            myChart.clear()
            myChart.setOption ({
              title: {
                text: '暂无数据',
                x: 'center',
                y: 'center',
                textStyle: {
                  fontSize: 14,
                  fontWeight: 'normal'
                }
              }
            })
          } else {
            var option = {
              title: {
                text: ''
              },
              // title: {
              //   text: '人力资源管理分布图',
              //   textStyle: {
              //     fontSize: 12,
              //     fontWeight: 'bolder',
              //     color: '#333'          // 主标题文字颜色
              //   }
              // },
              tooltip: {
                trigger: 'item'
              },
              // legend: {
              //   top: '5%',
              //   left: 'center'
              // },
              legend: {
                orient: 'vertical',
                left: 'left',
                // top: 'middle',
              },
              series: [
                {
                  name: '数量',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: 16,
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: human
                }
              ]
            }
            myChart.setOption (option)
            window.addEventListener('resize', function () {
              myChart.resize()
            })
          }
        })
      },
      // 性别分布
      selectChart7(sex) {
        this.$nextTick (() => {
          var myChart = this.$echarts.init (document.getElementById ('chart7'))
          if (sex === 1 || sex === null) {
            myChart.clear()
            myChart.setOption ({
              title: {
                text: '暂无数据',
                x: 'center',
                y: 'center',
                textStyle: {
                  fontSize: 14,
                  fontWeight: 'normal'
                }
              }
            })
          } else {
            // 指定图表的配置项和数据
            var option = {
              title: {
                text: ''
              },
              tooltip: {},
              legend: {
                data: ['人数'],
                left:'left',
              },
              xAxis: {
                data: sex.x,
                axisLabel: {
                  //  X 坐标轴标签相关设置
                  interval: 0,
                  rotate: '45'
                }
              },
              yAxis: {},
              series: [{
                name: '人数',
                type: 'bar',
                data: sex.y,
                barWidth: 35,
                itemStyle: {
                  color: '#7B997E'
                }
              }]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption (option)
            window.addEventListener('resize', function () {
              myChart.resize()
            })
          }
        })
      },

      // clearChart() {
      //   if (this.myChart) {
      //     this.myChart.clear();
      //   }
      // }
    }
  }
</script>

<style scoped>
  .loads {
    background: #06164A;
    z-index: 999;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0%;
    top: 0%;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  header {
    background: url(../../assets/imgs/head_bg.png);
    background-size: 100% 100%;
    position: relative;

  }

  /* 媒体查询  */
  @media screen and (max-width: 1024px) {
    html {
      font-size: 42px !important;
    }
  }

  @media screen and (min-width: 1920px) {
    html {
      font-size: 80px !important;
    }
  }

  /* 主题色 */
  .color-blue {
    color: #cae9c5;
  }

  .color-gray {
    color: #caccf6;
  }

</style>

<style scoped>
  .item {
    padding: 1.33rem 1.4rem 2.8rem;
  }

  /*左边中间部分排行榜*/
  .biaoge_pai {
    overflow: hidden;
  }

  .biaoge_pai ul li {
    height: 20%;
  }

  .biaoge_pai ul li .liIn {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    color: #fff;
    font-size: 0.06rem;
    height: 0.6rem;
  }

  .biaoge_pai ul li .liIn .liIn_left {
    width: 25%;
    position: relative;
    padding-left: 0.3rem;
  }

  .biaoge_pai ul li .liIn .liIn_left .bot {
    width: 0.2rem;
    height: 0.2rem;
    background: #91cc75;
    border-radius: 1000px;
    display: block;
    position: absolute;
    left: 0.02rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
  }

  .biaoge_pai ul li .liIn2 .liIn_left .bot {
    background: #e7feb8;
  }

  .biaoge_pai ul li .liIn3 .liIn_left .bot {
    background: #fdea8a;
  }

  .biaoge_pai ul li .liIn4 .liIn_left .bot {
    background: #8ff9f8;
  }

  .biaoge_pai ul li .liIn5 .liIn_left .bot {
    background: #91cc75;
  }

  .biaoge_pai ul li .liIn6 .liIn_left .bot {
    background: #05d1fc;
  }

  .biaoge_pai ul li .liIn .liIn_line {
    width: 58%;
    height: 0.2rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2000px;
  }

  .biaoge_pai ul li .liIn .liIn_line .line_lineIn {
    width: 100%;
    height: 0.2rem;
    background: #91cc75;
    border-radius: 100px;
    -webkit-animation: widthMove1 2s ease-in-out;
  }

  .biaoge_pai ul li .liIn2 .liIn_line .line_lineIn {
    background: #e7feb8;
    -webkit-animation: widthMove2 2s ease-in-out;
  }

  .biaoge_pai ul li .liIn3 .liIn_line .line_lineIn {
    background: #fdea8a;
    -webkit-animation: widthMove3 2s ease-in-out;
  }

  .biaoge_pai ul li .liIn4 .liIn_line .line_lineIn {
    background: #8ff9f8;
    -webkit-animation: widthMove4 2s ease-in-out;
  }

  .biaoge_pai ul li .liIn5 .liIn_line .line_lineIn {
    background: #d890fa;
    -webkit-animation: widthMove5 2s ease-in-out;
  }

  .biaoge_pai ul li .liIn6 .liIn_line .line_lineIn {
    background: #05d1fc;
    -webkit-animation: widthMove6 2s ease-in-out;
  }

  @-webkit-keyframes widthMove1 {
    0% {
      width: 0%;
    }
    100% {
      width: 98.5%;
    }
  }

  @-webkit-keyframes widthMove2 {
    0% {
      width: 0%;
    }
    100% {
      width: 88.5%;
    }
  }

  @-webkit-keyframes widthMove3 {
    0% {
      width: 0%;
    }
    100% {
      width: 68.5%;
    }
  }

  @-webkit-keyframes widthMove4 {
    0% {
      width: 0%;
    }
    100% {
      width: 40.5%;
    }
  }

  @-webkit-keyframes widthMove5 {
    0% {
      width: 0%;
    }
    100% {
      width: 22.5%;
    }
  }

  @-webkit-keyframes widthMove6 {
    0% {
      width: 0%;
    }
    100% {
      width: 10.5%;
    }
  }

  .biaoge_pai ul li .liIn .num {
    font-family: dig;
    padding-left: 0.1rem;
  }
</style>
